<template>
  <div style="width: 100%; height: 100%">


    <!--    搜索区-->
    <vxe-form
      ref="formRef"
      :data="formData"
      size="small"
      @submit="submitEvent"
      @reset="resetEvent">


      <vxe-form-item title="提交月份" field="year" span="6" :item-render="{}">
        <template #default="params">
          <vxe-date-picker v-model="formData.month" type="month"></vxe-date-picker>
        </template>
      </vxe-form-item>

      <vxe-form-item title="时间节点" field="day" span="6" :item-render="{}">
        <Input v-model:value="formData.day" suffix="号"></Input>
      </vxe-form-item>
      <vxe-form-item title="时间节点" field="timeBefore" span="6" :item-render="{}">
        <template #default="params">
          <vxe-select v-model="formData.timeBefore" placeholder="请选择" clearable>
            <vxe-option value="before" label="当月‘时间节点’前通过"></vxe-option>
            <vxe-option value="after" label="当月‘时间节点’后通过"></vxe-option>
          </vxe-select>
        </template>
      </vxe-form-item>
      <vxe-form-item  span="6" :item-render="{}">
        <template #default>
          <vxe-button type="submit" status="primary" content="查询" :loading="loading"></vxe-button>
          <vxe-button type="reset" content="重置" :loading="loading"></vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>

    <div style="background: white;">
      <span style="color: #c65206">提示:时俱佳业务员工资 因涉及公司主体 不推送到薪福通，例如：张鑫 即有钟部抽成又有时俱佳抽成 只统计并推送钟部抽成。</span>
    </div>
<!--    表格区-->
    <div style="">

      <div v-for="(item,index) in dataList" :key="index" style="height: 300px;">

        <vxe-grid  v-bind="gridOptions" ref="tableRef"  :data="item" class="my-table" >
          <template #toolbar_buttons>
             {{index}} <span v-if="item.length>0">结算月份:{{item[0].addDate}}</span>
          </template>

        </vxe-grid>
      </div>
    </div>
    <div style="width:100%;text-align:center;margin-top: 10px">
      <span v-if="xftBtn">{{xftBtn}}已有推送请注意核对</span>
<!--      submitBeforeFn batchSendYwXftSubmitFn-->
      <vxe-button v-if="!xftBtn&&!data_empty"  @click="submitBeforeFn" status="primary" content="推送到鑫福通" :loading="loading"></vxe-button>
<!--      <vxe-button content="测试发送" :loading="loading" @click="sendYwXftTestFn"></vxe-button>-->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { ApiSelect } from '@/components/Form';
import { VxeUI } from 'vxe-pc-ui'

import {
  batchSendYwXftQuery, batchSendYwXftSubmit,batchSendYwXftBtn,sendYwXftTest
} from '@/api/sys/approval';

import {
  BasicTableProps,
  VxeTableDefines,
} from '@/components/VxeTable';
import {
  vxeTableColumns,

} from './role.data';
import { Tag, Descriptions, Input } from 'ant-design-vue';
import {reactive, ref, unref, onMounted, computed} from 'vue';
import { useUserStore } from '@/store/modules/user';
import { useMessage } from '@/hooks/web/useMessage';
import { useDrawer } from "@/components/Drawer";
import util from '@/utils/util';
defineOptions({ name: 'MouldList' });
const { createMessage } = useMessage();
const userStore = useUserStore();

// const [register, { openModal, closeModal }] = useModal();
const [registerDrawer, { openDrawer }] = useDrawer();

const loading = ref(false);
const visible = ref(false);
const xftBtn=ref("");
const data_empty=ref(true);
const dataList=ref([]);
const nodes=ref([]);
const tableRef=ref();
var push_day=10;
const formData=ref({
  day:push_day,
  month:util.getCurrentMonth()+"-01",
  timeBefore:"before"
});


// let month = util.getCurrentMonth();
// console.log("---month:", month);

const gridOptions = reactive<BasicTableProps>({
  // keepSource: true,
  keepSource: true,
  editConfig: {
    trigger: 'click',
    mode: 'cell',
  },
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  columns: vxeTableColumns,
  exportConfig:{},
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
    refresh: true,
  },
  formConfig: {
    enabled: false,
  },
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    enabled: false,
  },
});




onMounted(() => {
   batchSendYwXftQueryFn(null);
})

function submitEvent({data}) {
  // console.log("--submitEvent:",data);
  batchSendYwXftQueryFn(data);
}
function resetEvent(e){
  formData.value.month=util.getCurrentMonth()+"-01";
  batchSendYwXftQueryFn(null);
}

function batchSendYwXftQueryFn(data){
  loading.value = true;

  batchSendYwXftQuery(formData.value).then((res) => {
    if (res.code === 200) {
     dataList.value= res.data;
      data_empty.value = JSON.stringify(res.data)=='{}';
    }else{
      createMessage.error(res.message);
    }
  }).finally(() => {
    loading.value = false;
  })
  batchSendYwXftBtnFn();
}

function batchSendYwXftBtnFn(){


  batchSendYwXftBtn({month:formData.value.month}).then((res) => {
    if (res.code === 200) {
      xftBtn.value= res.data;

    }else{
      createMessage.error(res.message);
    }
  })
}

function submitBeforeFn(){
  VxeUI.modal.confirm({
    id:1,
    content: '确定推送到薪福通!',
    // status: loading.value,
    lockView: false,
    mask: false,
    showClose: false,
    showConfirmButton: true
  }).then(type => {
    console.log(`操作类型 ${type}`)
    if(type=="confirm"){
     batchSendYwXftSubmitFn()
    }
  })
}

function closeModalFn(){
  VxeUI.modal.close(1)
}

function batchSendYwXftSubmitFn() {
 // console.log("--tableRef:",tableRef.value);
  let arr=[];
  tableRef.value.forEach((item,index)=>{

    arr.push(...item.data)
  });
  loading.value = true;
  batchSendYwXftSubmit(arr).then((res) => {
    if (res.code === 200) {
      createMessage.success(res.message);
      batchSendYwXftBtnFn();
      closeModalFn();
    }else{
      createMessage.error(res.message);
    }
  }).finally(() => {
    loading.value = false;
  })
}

function sendYwXftTestFn(){
  let arr=[];
  tableRef.value.forEach((item,index)=>{

    arr.push(...item.data)
  });
  loading.value = true;
  sendYwXftTest(arr).then((res) => {
    if (res.code === 200) {
      createMessage.success(res.message);
      batchSendYwXftBtnFn();
    }else{
      createMessage.error(res.message);
    }
  }).finally(() => {
    loading.value = false;
  })
}

</script>
<style lang="less">
.isReturn_clazz {
  text-align: center;
  cursor: pointer;
}

.count-i {
  width: 200px;
  margin-top: 8px;
}

.count-i-p {
  color: #c65206;
}
</style>
